<template>
	<view class="content">
		<image  class="content_bg" src="../static/invitationbg.png" mode=""></image>
		<image class="logo" src="../static/logo.png" mode=""></image>
		<view class="content_con">
			<image :src="invitation.avatar" mode=""></image>
			<view class="content_box">
				<text>邀请码: {{invitation.user_invitestr}}</text>
				<image class="scancode" src="../static/car.png" mode=""></image>
				<button  class="btnsave" type="primary">保存二维码</button>
				<view class="content_txt">
					<view style="margin-bottom: 29rpx;">
						<text>1</text>
						<text >邀请好友，注册成功即赠送抵扣券</text>
					</view>
					<view>
						<text>2</text>
						<text >受邀好友消费后返利{{invitation.drive}}元</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				invitation:{},
			};
		},
		onLoad() {
			this.invitaTion();
		},
		methods:{
			async invitaTion() {
				let res;
				try {
					res = await this.$request.post("api/User/invitation",{
						data:{
							uid: uni.getStorageSync('id'),
						},
					});
					// console.log(res);
					if (res.data.code == 1) this.invitation = res.data.data;
					console.log(this.invitation)
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					return uni.showToast({
						title: "网络连接失败！",
						icon: "none"
					});
				}
				//如果获取成功，就填充数据
				// if (res.data.code == 1) this.userInfo = res.data.data;
			
				// console.log(this.userInfo);
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		image:nth-child(1){
			width: 100%;
			height: 100%;
		}
		.logo{
			position: absolute;
			top:5%;
			left:50%;
			margin-left:-234rpx;
			width: 468rpx;
			height: 62rpx;
		}
		.content_con{
			position: absolute;
			top:12%;
			width: 100%;
			// background: red;
			height: calc("~100% - 62rpx");
			padding: 51rpx 46rpx 118rpx;
			image:nth-child(1){
				position: absolute;
				top: 0;
				left: 42%;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				z-index: 1;
			}
			.content_box{
				position: relative;
				width: 100%;
				height: 802rpx;
				background: #fff;
				display: flex;
				justify-content: center;
				padding-top: 87rpx;
				text{
					height: 33rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 33rpx;
					}
				image{
					width: 340rpx;
					height: 340rpx;
					position: absolute;
					margin: 40rpx auto 60rpx
				}
				.btnsave{
					position: absolute;
					top:541rpx;
					width: 560rpx;
					height: 80rpx;
					background: #4B9EFF !important;
				}
				.content_txt{
					position: absolute;
					top: 666rpx;
					display: flex;
					flex-direction: column;
					view text{
						&:first-child{
							display: inline-block;
							width: 24rpx;
							height: 24rpx;
							border-radius: 50%;
							background: #0081FF;
							color: #fff;
							text-align: center;
							line-height: 24rpx;
						}
						&:last-child{
							line-height: 1;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							margin-left: 35rpx;
						}
					}
				}
			}
		}
	}
</style>
